<template>
  <div :class="$style.container">
    <group>
      <!-- <cell>
        <div slot="title" :class="$style.title">
          <i :class="[$style.orderIcon,'iconfont','icon-tubiaolunkuo-']"></i>
          <span>全部订单</span>
        </div>
      </cell> -->
      <cell is-link :link="{path: '/user'}">
        <div slot="title" :class="$style.title">
          <span>修改个人信息</span>
        </div>
      </cell>
      <cell is-link :link="{path: '/cart'}">
        <div slot="title" :class="$style.title">
          <span>我的购物车</span>
        </div>
      </cell>
    </group>
     <ul :class="$style.list">
        <router-link :to="{path: '/order',query: {index:0}}" tag="li">
          <i :class="['icon-icondd1','iconfont',$style.icon]" style="color:#13d1be;"></i>
          <p>全部订单</p>
        </router-link>
        <router-link :to="{path: '/order',query: {index:1}}" tag="li">
          <i :class="['icon-daizhifu','iconfont',$style.icon]" style="color:#ff5e6f;"></i>
          <p>待付款</p>
        </router-link>
        <router-link :to="{path: '/order',query: {index:2}}" tag="li">
          <i :class="['icon-yizhifu1','iconfont',$style.icon]" style="color:#72baff;"></i>
          <p>待使用</p>
        </router-link>
      </ul>
  </div>
</template>
<script>
import { Group, Cell } from 'vux'
export default {
  data () {
    return {}
  },
  components: {
    Group,
    Cell
  }
}
</script> 
<style lang="less" module>
.container {
  padding: 10px 0px;
 background: #fff;
 .title {
   .orderIcon {
    padding: 3px;
    border-radius: 3px;
    font-size:20px;
    font-weight: 700;
    background: #ed433f;
    color:#fff;
  }
  span {
    margin-left: 5px;
    font-size:16px;
    color:#333;
  }
 }
 .allOrder {

 }
 .payOrder {

 }
 .waitOrder {

 }
 .tuiOrder {

 }
 .list {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   li {
     padding-top: 5px;
     list-style: none;
     width: 33.333%;
     text-align: center;
     .icon {
        vertical-align: 10px;
        color:#666;
        font-size:24px;
        font-weight: bold;
      }
    p{
      margin-top:-5px;
      font-size:14px;
      color:#666;
    }
   }
 }
 
}
</style>